<template>
	<view class="contain">
		<view class="payment" v-if="orderInfo.movieName" :style="{'padding-bottom':paddingBottom + 5 + 'px'}">
			<!-- 头部 start -->
			<!-- 	<title :center="false" title="确认订单" iconSize="38" bgcolor="" color="rgba(255, 255, 255, 1)"
				icon="/static/img/other/to-back.png" :bold="false" :iconSize="45" @to-click="toBack"></title> -->
		
			<title :center="true"  title="确认订单" iconSize="38" :bgcolor="titleSty.bgColor" :color="titleSty.color"
				@toclick="toBack(1)" :icon="titleSty.icon"></title>
		
			<view class="top-con-bg">
				<view class="top-con mh20 p20" :style="{'top':height * 1.5 + 130 + 'rpx'}">
					<view class="flex-start pb20" style="border-bottom: 2rpx solid rgba(232, 234, 238, 0.7);">
						<view class="top-con-left mr20">
							<img :src="orderInfo.cover_img" alt="">
						</view>
						<view class="top-con-right">
							<view class="flex-between align-center">
								<text class="f36 fontw no-warp-one" style="color: rgba(34, 34, 34, 1);">{{orderInfo.movieName}}</text>
								<text class="f22" style="color: rgba(102, 102, 102, 1);min-width: fit-content;">共{{orderInfo.count}}张</text>
							</view>
							<view class="mt10 sendfont2 medium"   style="color: #222222;">
								<text>{{orderInfo.show_time || '' | getWeekByDay}}</text>
								<text>{{orderInfo.show_time || '' | formateDate('MM-DD')}}</text>
								<text>
									{{orderInfo.show_time || '' | formateDate('HH:mm')}}~{{orderInfo.show_time || '' | endTime(orderInfo.timeLength)}}
								</text>
								<text v-if="orderInfo.tp">{{orderInfo.tp}}</text>
							</view>
							<view class="mt10 flex-start align-center" style="color: rgba(102, 102, 102, 1);">
								<img style='width: 26rpx;height: 26rpx;margin-right: 6rpx;' src="../static/location.png" alt="">
								<text>{{orderInfo.cname}} {{orderInfo.cinemaName}}</text>
							</view>
							<view class="mt10" style="color: rgba(102, 102, 102, 1);">
								<text class="mr10">{{orderInfo.hallName}}</text>
								<text>{{orderInfo.seat | shufilter(',', ' ', true)}}</text>
							</view>
						</view>
					</view>
					<view class="flex-start align-center f24 mt20" style="color: rgba(0, 0, 0, 1);font-weight: 500;">
						<view class="flex-start align-center">
							<text style="color: #FF4345;padding-top: 2rpx;" class="iconfont iconai55"></text>
							<text>不可退票</text>
						</view>
						<view class="flex-start align-center" style="margin-left: 36rpx;">
							<text style="color: #FF4345;padding-top: 2rpx;" class="iconfont iconai55"></text>
							<text>不可改签</text>
						</view>
					</view>
				</view>
			</view>
		
			<view class="spare-phone m20"  :style="{'margin-top':height2 + 20 + 'rpx'}">
				<view class="p20" style="border-bottom: 2rpx solid rgba(244, 244, 244, 1);">
					<view class="flex-between align-center">
						<text class="f28" style="color:rgba(34, 34, 34, 1)">备选座位</text>
						<u-checkbox :value="isChange" shape="circle" active-color="#28C48C" @change="changeChoose">
						</u-checkbox>
					</view>
					<view class="mt10 f22" style="color: rgba(153, 153, 153, 1);">
						当所选位置售罄时，系统自动调至最佳观影位置。
					</view>
				</view>
				<view class="p20 flex-start align-center">
					<view class="f28 mr40" style="color:rgba(34, 34, 34, 1)">手机号</view>
					<input @input='inputEve' @blur='inpBlur' style="flex:1;font-size: 28rpx;color: rgba(34, 34, 34, 1);"
						type="number" placeholder='请输入手机号' maxlength="11" v-model="phone" />
				</view>
			</view>
		
			<!-- 购票模式 start -->
			<view class="buy-ticket-mode m20">
				<view class="buyTicketMode">
					<view class="buyTicketMode-tehui" @click="clickRadio(0)">
						<view class="buyTicketMode-left">
							<view class="mb10 flex-start align-center">
								<!-- <text class="iconfont iconrementuijian" style="color: #EF3B5D;font-size: 24rpx;"></text> -->
								<text class="buyTicket-title mr10">特惠购票</text>
								<image src="../static/benefit.png" style="width: 26rpx;height: 28rpx;" mode=""></image>
							</view>
							<view class="buyTicket-info">
								优惠较大，15-60分钟出票，出票失败全额退款
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;" v-if="selectedMember.id">
							<view class="buyTicketMode-right mr10">
								<text class="buyTicket-title">
									￥{{orderInfo.original_price * orderInfo.count | toFixed(2) }}
								</text>
							</view>
							<view class="buyTicketMode-right">
								<radio style="transform:scale(0.6);width: 36rpx;" @click="clickRadio(0)" color='#28C48C'
									:checked="select == 0" :disabled="isBol ? false : true" />
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;" v-else>
							<view class="buyTicketMode-right mr10">
								<text
									class="buyTicket-title mb10">￥{{orderInfo.price * (orderInfo.count - coupon.item.length) | toFixed(2) }}</text>
								<text style="color:rgba(239, 59, 93, 1);">立省￥{{discount | toFixed(2)}}</text>
							</view>
							<view class="buyTicketMode-right">
								<radio style="transform:scale(0.6);width: 36rpx;" @click="clickRadio(0)" color='#28C48C'
									:checked="select == 0" :disabled="isBol ? false : true" />
								<view style="width: 36rpx;height: 32rpx;"></view>
							</view>
						</view>
					</view>
		
					<view class="buyTicketMode-jishu" @click="clickRadio(1)" v-if="!isBol">
						<view class="buyTicketMode-left">
							<view class="mb10 flex-start align-center">
								<!-- 	<text class="iconfont iconjisutuikuan" style="color: #417DFF;font-size: 30rpx;"></text> -->
								<text class="buyTicket-title mr10">极速购票</text>
								<image src="../static/extreme-speed.png" style="width: 30rpx;height: 36rpx;" mode="">
								</image>
							</view>
							<view class="buyTicket-info">
								实时锁座，15分钟内出票，出票失败全额退款
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;">
							<view class="buyTicketMode-right mr10">
								<text
									class="buyTicket-title">￥{{(orderInfo.settle_price * orderInfo.count).toFixed(2)}}</text>
								<view style="width: 84rpx;height: 32rpx;"></view>
							</view>
							<view class="buyTicketMode-right">
								<radio @click="clickRadio(1)" style="transform:scale(0.6);width: 36rpx;" color='#28C48C'
									:checked="select == 1" />
								<view style="width: 36rpx;height: 32rpx;"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 购票模式 end -->
		
			<!-- 购票须知 start -->
			<view class="buyticket m20 ph20">
				<view class="title flex">
					<text class="f32 fontw" style="color: rgba(34, 34, 34, 1);">购票须知</text>
					<view class="choiceBox">
						<u-checkbox class="" v-model="refundModal.checked" active-color="#28C48C" shape="circle"
							@change="chooseAgree" label-size="26">
							<view v-if="refundModal.checked == false">未读</view>
							<view v-else>
								已读
							</view>
						</u-checkbox>
					</view>
				</view>
		
				<view class="popup-desc-box">
					<view class="desc-title">1.根据中国电影发行放映协会要求，观影前需实名登记观众信息，未戴口罩和体温37.3度以上者不得进入。</view>
					<view class="desc-title" style="color: red;">2.请确认场次和时间无误,购票成功后不可退票、不可改签。</view>
					<view class="desc-title">3.付款成功后，预计在10-60分钟内出票，出票失败全额退款。</view>
					<view class="desc-title">4.取票码查看方式：点击“我的-电影票”即可查看取票码，凭二维码或取票码至影城取票机即可取票。</view>
					<view class="desc-title" style="color: red;">5.如遇影城设备故障等不可抗力导致影片无法正常播放，会退票退款</view>
				</view>
			</view>
			<!-- 购票须知 end -->
		
			<!-- 底部提交订单 start -->
			<view class="order_botm">
				<view class="buke" @click="priceClick" v-if="!option.pay">
					<view class="flex-between align-center" style="width: 100%;">
						<view class="flex-start align-center">
							<text class="f28 fontw" style="color: rgba(34, 34, 34, 1);">合计：</text>
							<view style="color: #FF4345;" v-if="select === 0">
								<text class="f24">￥</text>
								<!-- <text class="f36 fontw">{{coupon.item.id ? 0 : (orderInfo.price * orderInfo.count) | toFixed(2)}}</text> -->
								<!-- <text class="f36 fontw"> {{coupon.item.length > 0 ? (orderInfo.price * (orderInfo.count - coupon.item.length)).toFixed(2) : (orderInfo.price * orderInfo.count).toFixed(2)}}</text> -->
								<text class="f36 fontw" v-if="coupon.item.length > 0 && !selectedMember.id"> 
									{{orderInfo.price * (orderInfo.count - coupon.item.length).toFixed(2)}}
								</text>
								<text class="f36 fontw" v-else-if="coupon.item.length == 0 && selectedMember.id">0</text>
								<text class="f36 fontw" v-else>
									{{(orderInfo.price * orderInfo.count).toFixed(2)}}
								</text>
							</view>
							<view style="color: #FF4345;" v-if="select === 1">
								<text class="f24">￥</text>
								<text class="f36 fontw"> {{coupon.item.length > 0 ? (orderInfo.settle_price * (orderInfo.count - coupon.item.length)).toFixed(2) : (orderInfo.settle_price * orderInfo.count).toFixed(2)}}</text>
							</view>
						</view>
						<view class="flex-start align-center mr20" style="color: rgba(153, 153, 153, 1);">
							<text>明细</text>
							<view v-if="priceModal.show == false" class="iconfont iconlong-arrow-top  arr"></view>
							<view v-else class="iconfont iconarrowdown arr"></view>
						</view>
					</view>
				</view>
		
				<view class="tijiaoorder" v-if="!option.pay">
					<button class="tijiaoorder" @click="getPayParams">立即付款</button>
				</view>
				<view class="tijiaoorder two-btn" v-else>
					<button class="tijiaoorder" @click="setCancel">取消订单</button>
					<button class="tijiaoorder" @click="getPayParams">确认付款</button>
				</view>
		
			</view>
			<!-- 底部提交订单 end -->
		
			<!-- 价格明细弹出 start -->
			<u-popup v-model="priceModal.show" closeable mode="bottom">
				<view class="popup-model-box">
					<view class="popup-title">价格明细</view>
					<view class="popup-content">
						<view class="popup-desc-box">
							<view class="desc-content" style="font-size: 28rpx;">电影票 {{orderInfo.count}}张</view>
							<view class="desc-content" style="font-size: 28rpx;">
								<view>原价</view>
								<view class="desc-title">
									{{(orderInfo.original_price * orderInfo.count) | toFixed(2)}}元
								</view>
							</view>
							<view class="desc-content" style="font-size: 28rpx;">
								<text>特惠购票</text>
								<!-- <view class="desc-title" v-if="select === 0">-{{discount | toFixed(2)}}元</view> -->
								<view class="desc-title" v-if="select === 0 && coupon.item.length != orderInfo.count && !selectedMember.id">-{{discount | toFixed(2)}}元</view>
								<view class="desc-title" v-else>0元</view>
							</view>
							<view class="total-amount">
								<text class="total-amount-title">合计金额</text>
								<view class="total-amount-content">
									{{totalAmount}}<text>元</text>
								</view>
								
							</view>
						</view>
						<view class="popup-bottom-switch" style="opacity: 0;">
							<view>我已阅读并同意</view>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 价格明细弹出 end -->
		
			<!-- 是否调座弹框 start -->
			<seat-popup v-model="seatShow" @seat-cancel='seatClick'></seat-popup>
			<!-- 是否调座弹框 end -->
		
			<!-- 购票须知弹框 start -->
			<notice-popup v-model="noticeShow" @confirm="refundClick"></notice-popup>
			<!-- 购票须知弹框 end -->
		</view>
	</view>
</template>

<script>
	import couponPopup from '../components/CouponPopup.vue'
	import cardPopup from '../components/CardPopup.vue'
	import title from '@/pages/components/title.vue'
	import noticePopup from '../components/NoticePopup.vue'
	import SeatPopup from '../components/SeatPopup.vue'
	export default {
		data() {
			return {

				titleSty: {
					bgColor: 'none',
					color: '#FFF',
					icon: '/static/img/other/to-back.png',
				},
				noticeShow: false,
				seatShow: false,
				// couponShow: false,
				coupon: {
					updata: true,
					show: false,
					item: [],
					text: '无可用'
				},
				cardShow: false,
				paddingBottom: 0,
				height: 0,
				height2: 0,
				option: {},
				// 备选座位开关
				isChange: true,
				// 订单信息
				orderInfo: {
					order: {},
					userinfo: {}
				},
				// 不退退票弹出
				refundModal: {
					show: false,
					checked: false
					// checked: true
				},
				// 价格明细弹出
				priceModal: {
					show: false,
				},
				// 挖票生活
				temId: [
					"HBNok3gZTc84SufHPcCgpsSu2L_nh3w8E33tGNRSFVo", //电影出票成功通知
					"YidE4vvJ_RNQ0mZB3O4kQWyCorZ_cDyLcu2xKpbu3nw", //电影出票失败通知
					"Qs9oEubbakgSFsY72Ye9lqsBWIWeU7ZPUVqwLLqd1Tw" //订单状态通知
				],
				phone: "",
				isBol: true,//是否是极速出票的时限内
				select: 0,
				// 我的电影卡列表
				myMemberList:[],
				myMembertext:'',//电影卡要显示的文本
				selectedMember:{},//已选中电影卡
			}
		},
		computed: {
			discount() {
				if(this.coupon.item.length > 0){
					if (this.orderInfo.original_price) {
						return (this.orderInfo.original_price * (this.orderInfo.count - this.coupon.item.length)) - (this.orderInfo
							.price * (this.orderInfo.count - this.coupon.item.length))
					}
				}else{
					if (this.orderInfo.original_price) {
						return (this.orderInfo.original_price * this.orderInfo.count) - (this.orderInfo
							.price * this.orderInfo.count)
					}
				}
				return 0
			},
			// 价格明细需要的合计金额
			totalAmount(){
				let original_totalAmount = (this.orderInfo.original_price * this.orderInfo.count).toFixed(2)
				let totalAmount
				if(this.coupon.item.length > 0){
					// 此时有使用优惠券
					totalAmount = original_totalAmount - (this.orderInfo.original_price * this.coupon.item.length).toFixed(2)
					// 是否有剩余座位使用了特惠购票
					if(this.orderInfo.count > this.coupon.item.length && this.isBol){
						// 特惠购票的价格*特惠购票的张数
						totalAmount = this.orderInfo.price * (this.orderInfo.count - this.coupon.item.length).toFixed(2)
					}
				}else if(this.selectedMember.id){
					// 此时有使用电影卡
					totalAmount = 0.00
				}else{
					// 都没有使用
					// 是否使用了特惠购票
					if(this.orderInfo.count > this.coupon.item.length && this.isBol){
						// 特惠购票的价格*特惠购票的张数
						totalAmount = (this.orderInfo.price * this.orderInfo.count).toFixed(2)
					}
					if(this.orderInfo.count > this.coupon.item.length && !this.isBol){
						// 极速购票的价格*极速购票的张数
						totalAmount = original_totalAmount
					}
				}
				
				return totalAmount
			}
		},

		components: {
			title,
			noticePopup,
			SeatPopup,
			couponPopup,
			cardPopup
		},

		onPageScroll(e) {
			if (e.scrollTop > 30) {
				this.titleSty.bgColor = 'white'
				this.titleSty.color = '#000'
				this.titleSty.icon = 'icon'
			} else {
				this.titleSty.bgColor = 'none'
				this.titleSty.color = '#FFF'
				this.titleSty.icon = '/static/img/other/to-back.png'
			}
		},

		watch: {
			"$store.state.uInfo.tel"(val) {
				this.phone = val || ''
			},
			orderInfo: {
				handler(newValue, oldValue) {
					this.$nextTick(function() {
						this.select = this.isBol ? 0 : 1
					})
				},
				immediate: true
			}
		},

		onLoad(option) {
			this.orderInfo = JSON.parse(decodeURIComponent(option.order))
			this.isChange = this.orderInfo.ischange == 1 ? true : false
			this.phone = this.$store.state.uInfo.tel || ''
			// this.isOut()
		},

		onShow() {
			this.setHeight()
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)

			this.coupon.updata = false
			this.$nextTick(() => {
				this.coupon.updata = true
			})
			
			// this.getMyMember()//获得我的电影卡
		},
		onUnload() {
			if (this.option.back) {
				this.$common.toBack(1)
			}
		},
		methods: {
			// 获取我的电影卡
			getMyMember(){
				let data = {}
				data.card_type = '2'
				this.$api.getMyMember(data).then((res)=>{
					// console.log(res.data.data.data);
					this.myMemberList = res.data.data.data
				},(rej)=>{})
			},
			showCoupon(){
				if(!this.orderInfo.selectedMember && this.isBol){this.coupon.show = true}
			},
			showMember(){
				if(!this.orderInfo.selectCoupon && this.isBol){this.cardShow = true}
			},
			getMyMembertext(text){
				this.myMembertext = text
			},
			// 设置已选中的电影卡
			setSelectMember(item){
				this.selectedMember = item
				// console.log(item,item.id?true:false);
				this.$set(this.orderInfo,'selectedMember',item.id?true:false)
			},
			couponSetText(val) {
				this.coupon.text = val
			},

			couponSetItem(val) {
				console.log('couponSetItem:',val);
				this.coupon.item = val
				// this.$set(this.coupon,'item',val)
				// console.log(val?true:false);
				this.$set(this.orderInfo,'selectCoupon',val?true:false)
			},
			setHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.order_botm').boundingClientRect(data => {
						this.paddingBottom = data.height
					}).exec();
					this.height = this.$common.setWidthHeight()
					this.height2 = this.height * 1.5 + 130 + 328 - 412
				})
			},
			clickRadio(i) {
				if (i === 1) {
					this.select = i
				} else {
					if (!this.isBol) {
						uni.showToast({
							title: "特惠购票需提前60分钟",
							icon: 'none'
						})
						return false
					} else {
						this.select = i
					}
				}
			},
			isOut() {
				// let t1 = this.$moment(this.orderInfo.order.show_time)
				let t1 = this.$moment(this.orderInfo.show_time)
				let t2 = this.$moment(new Date());
				//计算时间差并转换成标准时间单位
				let dura = t1.format('x') - t2.format('x');
				let tempTime = this.$moment.duration(dura);
				this.isBol = tempTime.asMinutes() > 60 ? true : false
			},
			// 手机号输入框的focus
			inpFocus(e) {
				this.phone = ""
			},
			//手机号输入框的输入
			inputEve(e) {},
			//手机输入框失去焦点
			inpBlur(e) {
				// console.log(e)
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return false
				} else {
					// 必须是1开头，第二位数字可以是0-9任意一个，总长为11
					// let reg = /^1([0-9])\d{9}$/;
					// 必须是1开头，第二位数字可以是3|5|6|7|8|9任意一个，总长为11
					let reg = /^1([3|5|6|7|8|9])\d{9}$/;
					// console.log(/^1(3|4|5|7|8)\d{9}$/.test(this.phone))
					if (!reg.test(this.phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						})
						return false
					}else{
						return true
					}
				}
			},
			// 返回
			toBack() {
				this.$common.toBack(1)
			},
			// 不可退票弹框
			refundClick() {
				this.refundModal.checked = true
				this.getPayParams()
			},
			// 价格明细弹框
			priceClick() {
				this.refundModal.show = false
				this.priceModal.show = !this.priceModal.show
			},
			seatClick() {
				let _this = this
				_this.isChange = !_this.isChange
				_this.orderInfo.ischange = _this.isChange ? 1 : 0
				_this.seatShow = false
			},
			// switch改变
			changeChoose(e) {
				let _this = this
				if (this.isChange) {
					this.seatShow = true
				} else {
					_this.isChange = !_this.isChange
					_this.orderInfo.ischange = _this.isChange ? 1 : 0
				}
			},

			// 座位设置备选
			setIsChange() {
				uni.showLoading({
					title: '设置中'
				})
				this.$api.setIsChange({
					val: !this.isChange,
					oid: this.option.oid
				}).then(res => {
					this.isChange = !this.isChange
					uni.hideLoading()
				}).catch(() => {})
			},
			// 设置取消订单
			async setCancel() {
				if (!await this.getIsPayByOid()) {
					this.$common.toBack(1)
				} else {
					let _this = this
					uni.showModal({
						title: "温馨提醒",
						content: "订单取消后,已选座位将不会保留",
						cancelColor: "#999",
						confirmColor: "#F1255D",
						cancelText: "确认取消",
						confirmText: "继续支付",
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
							} else if (res.cancel) {
								_this.releaseOrder(true)
							}
						},
					})
				}
			},
			// 获取订单是否支付
			async getIsPayByOid() {
				let res = await this.$api.getIsPayByOid({
					id: this.orderInfo.order.id
				})
				if (res.data.data.is_pay == 0) {
					return true
				} else {
					return false
				}
			},
			// 取消订单
			releaseOrder(status) {
				if (status) {
					uni.showLoading({
						title: "取消中"
					})
				}
				this.$api.releaseOrder({
					oid: this.option.oid
				}).then(res => {
					uni.hideLoading()
					this.$common.toBack(1)
				}).catch(err => {
					console.log(err)
					this.$common.toBack(1)
				})
			},
			// 使用优惠券支付
			async couponPay() {
				// console.log('使用优惠劵支付');
				let orderRes = await this.addNewOrder()
				let coupon = []
				if(this.coupon.item.length>0){
					this.coupon.item.forEach((item)=>{
						coupon.push(item.id)
					})
					coupon = coupon.join(',')
				}
				if(this.selectedMember.id){
					coupon = this.selectedMember.id + ''
				}
				let data = {
					'orderno': orderRes.orderno,
					'coupon': coupon
				}
				
				let _this = this
				this.$api.usedCoupon(data).then(res => {
					uni.requestSubscribeMessage({
						tmplIds: _this.temId,
						complete: function() {
							if (orderRes.status) {
								let id = orderRes.id
								// 待支付金额不为0时（没有使用电影卡且没有全部使用优惠券），调起微信支付
								if(!_this.selectedMember.id && _this.orderInfo.count - _this.coupon.item.length > 0){
									_this.$api.getPayParams({
										id: id
									}).then(res => {
										let data = res.data.data
										data.provider = 'wxpay'
										_this.$common.requestPayment(data, (result) => {
											uni.navigateTo({
												url: `/subpages/orderDetail/order-detail?no=${orderRes.orderno}`
											})
										}, (error) => {
											uni.navigateTo({
												url: `/subpages/seat/submit?oid=${id}&pay=1`
											})
										})
									}).catch((err) => {
										console.log('getPayParams',err)
									})
									uni.hideLoading()
								}else{
									// 支付金额为0，无需调起微信支付。直接进入订单详情
									uni.navigateTo({
										url: `/subpages/orderDetail/order-detail?no=${orderRes.orderno}`
									})
								}
							}
						},
						fail: function(e) {
							console.log('uni.requestSubscribeMessage=>fail:',e)
						},
					})
					// uni.navigateTo({
					// 	url: `/subpages/orderDetail/order-detail?no=${orderRes.orderno}`
					// })
					// console.log('res', res)
				},(rej)=>{
					console.log('this.$api.usedCoupon=>rej', rej)
				})
			},
			// 唤起支付
			getPayParams() {
				if(!this.inpBlur()){
					return false
				}
				
				if (!this.refundModal.checked) {
					this.noticeShow = true
					return false
				}
				// 有优惠券，走优惠券支付
				if (this.coupon.item.length >0) {
					this.couponPay()
					return
				}
				// 有电影卡，走优惠券支付
				if (this.selectedMember.id) {
					this.couponPay()
					return
				}
				// 都没有，走微信支付
				let _this = this
				uni.requestSubscribeMessage({
					tmplIds: this.temId,
					complete: async function() {
						let orderRes = await _this.addNewOrder()
						// console.log('res', orderRes)
						// return
						if (orderRes.status) {
							let id = orderRes.id
							_this.$api.getPayParams({
								id: id
							}).then(res => {
								let data = res.data.data
								data.provider = 'wxpay'
								_this.$common.requestPayment(data, (result) => {
									uni.navigateTo({
										url: `/subpages/orderDetail/order-detail?no=${orderRes.orderno}`
									})
								}, (error) => {
									uni.navigateTo({
										url: `/subpages/seat/submit?oid=${id}&pay=1`
									})
								})
							}).catch((err) => {
								console.log(err)
							})
							uni.hideLoading()
						}
					},
					fail: function(e) {
						console.log(e)
					}
				})
			},
			addNewOrder() {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中'
					})
					let data = Object.assign({}, this.orderInfo)
					data['is_express'] = this.select
					if (this.select === 1) {
						data['price'] = data['settle_price']
					}
					if(this.selectedMember.id){
						data['price'] = data['original_price']
					}
					data['tel'] = this.phone
					if(this.coupon.item.length > 0)data['coupon'] = 1
					this.$api.addNewOrder({
						listInfo: data
					}).then(res => {
						let data = {
							status: true,
							id: res.data.data.id,
							orderno: res.data.data.orderno
						}
						uni.hideLoading()
						resolve(data)
					}).catch(err => {
						uni.hideLoading()
						let data = {
							status: false,
						}
						uni.hideLoading()
						reject(data)
					})
				})
			},
			//点击已阅读
			chooseAgree() {
				this.refundModal.show = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.contain {
		width:100vw;
		height:100vh;
		overflow-y:scroll
	}
	.contain::-webkit-scrollbar {
		display: none;
	}
	/deep/.coupon-popup-body .u-checkbox {
		.u-checkbox__icon-wrap {
			.u-icon {
				display: flex !important;
			}
		}

		.u-checkbox__label {
			display: none !important;
		}
	}

	/deep/.card-popup-body {
		.u-radio__label {
			display: none !important;
		}

		.u-radio__icon-wrap {
			background: white;
			border: unset !important;
		}

		.u-radio__icon-wrap__icon {
			display: flex;
		}

		// .u-icon__icon {
		// 	color: rgba(40, 196, 140, 1) !important;
		// }
	}


	.spare-phone {
		/deep/.u-checkbox__icon-wrap {
			border-radius: unset !important;
			width: 28rpx !important;
			height: 28rpx !important;
		}

		/deep/.u-checkbox__icon-wrap__icon {
			height: 34rpx;
			line-height: 34rpx;

			.u-icon {
				vertical-align: top;

				.u-icon__icon {
					line-height: 34rpx;
				}
			}
		}

		/deep/.u-checkbox__label {
			display: none;
		}
	}



	.top-con-bg {
		height: 412rpx;
		// background: linear-gradient(270deg, #EF424F 0%, #FF5588 100%);
		background: linear-gradient(270deg, #FF5588 0%, #EF424F 100%);
		position: relative;

		.top-con {
			background: rgba(255, 255, 255, 1);
			position: absolute;
			border-radius: 16rpx;
			width: calc(100% - 40rpx);
			height: 328rpx;

			.top-con-left {
				width: 140rpx;
				height: 210rpx;

				>img {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			.top-con-right {
				flex: 1;

				.sendfont2 {
					font-size: 24rpx;
					color: rgba(34, 34, 34, 1);

					text {
						margin-right: 16rpx;
						font-weight: 500;

						&:last-of-type {
							color: rgba(19, 142, 101, 1);
							background-color: rgba(229, 248, 241, 1);
							border-radius: 12rpx;
							font-size: 22rpx;
							padding: 3rpx 8rpx;
						}
					}
				}
			}
		}
	}

	.card-coupon,
	.spare-phone,
	.buy-ticket-mode,
	.buyticket {
		border-radius: 12rpx;
		background: #FFFFFF;
	}

	.buyticket {
		/deep/.u-checkbox__icon-wrap {
			width: 28rpx !important;
			height: 28rpx !important;
		}
	}


	.buyTicketMode {
		width: 100%;
		color: #aaa;
		font-size: 22rpx;

		>view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			&:nth-of-type(1) {
				// padding-bottom: 0;
				border-bottom: 2rpx solid rgba(232, 234, 238, 0.7);
			}
		}
		.buyTicketMode-right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}

		.buyTicket-title {
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx !important;
		}
	}

	.arr {
		color: #D9D9D9;
		margin-left: 8rpx;
		font-size: 24rpx;
	}


	/deep/.u-mode-center-box {
		min-height: 0 !important;
		min-width: 0 !important;
	}

	.bai {
		color: #FFFFFF;
	}
	
	// 确认订单头部
	.payment {
		background-color: rgba(244, 244, 244, 1);
		min-height: 100vh;
		overflow: auto;
		
		// 购票须知
		.buyticket {
			background-color: #FFFFFF;

			.title {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx dashed #F2F2F2;

				.choiceBox {
					display: flex;
					justify-content: center;
					align-items: center;

					.line-red-new {
						color: #f1255d;
					}

					/deep/.u-checkbox {
						// display: block !important;
						margin-right: 6rpx;

					}

					/deep/.u-checkbox__icon-wrap__icon {
						height: 34rpx;
						line-height: 34rpx;

						.u-icon {
							vertical-align: top;

							.u-icon__icon {
								line-height: 34rpx;
							}
						}
					}
				}
			}

			.popup-desc-box {
				>view {
					margin-top: 15rpx;

					&:last-child {
						padding-bottom: 20rpx;
					}
				}

				.desc-title {
					font-size: 26rpx;
					// color: #AAAAAA;
					color: rgba(51, 51, 51, 1);
				}

				.desc-content {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		// 影票信息结束
		// 提交底部开始
		.order_botm {
			width: 100%;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 0 30rpx;
			z-index: 999;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, .1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tijiaoorder {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;

				button {
					width: 228rpx;
					background: rgba(255, 67, 69, 1);
					border-radius: 999rpx;
					color: #fff;
					font-size: 32rpx;
					height: 64rpx;

					&::after {
						border: 0;
					}
				}
			}

			.two-btn {
				width: 100vw;
				display: flex;
				justify-content: space-between !important;

				button {
					margin: 0;
					width: 300rpx;

					&:nth-of-type(1) {
						background-image: none;
						background-color: #F0F0F0;
						color: #000;
					}
				}
			}

			.buke {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;
			}

		}
	}

	/deep/.u-countdown-colon {
		color: #F1255D !important;
	}

	/deep/.u-switch--disabled {
		opacity: 1 !important;
	}


	.mode {
		border-top: 14rpx solid #F9F9F9
	}

	.popup-model-box {
		.popup-title {
			padding: 20rpx 0;
			font-size: 36rpx;
			color: #333;
			text-align: center;
		}

		.popup-content {
			padding: 30rpx 40rpx;
			padding-bottom: 200rpx;
			color: #666;

			.popup-desc-box {
				>view {
					margin-top: 10rpx;
				}

				.desc-title {
					font-size: 26rpx;
					color: #AAAAAA;
				}

				.desc-content {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				
				.total-amount {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					>.total-amount-title {
						font-size: 26rpx;
						color: rgba(51, 51, 51, 1);
						font-weight: 600;
					}
					>.total-amount-content {
						font-size: 36rpx;
						color: #FF4345;
						font-weight: 600;
						>text {
							font-size: 26rpx;
							font-weight: 400;
						}
					}
				}
			}

			.popup-bottom-switch {
				margin-top: 140rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.switch {
					display: flex;
					align-items: center;

					/deep/.u-checkbox {
						display: block !important;
						margin-right: 20rpx;

					}

					/deep/.u-checkbox__icon-wrap__icon {
						height: 34rpx;
						line-height: 34rpx;

						.u-icon {
							vertical-align: top;

							.u-icon__icon {
								line-height: 34rpx;
							}
						}
					}
				}

				.line-red-new {
					color: #f1255d;
				}
			}
		}
	}
</style>
